iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 3
1
Modern Web

試著學 Hexo系列 第 3

(3) 試著學 Hexo - 如何安裝 Hexo

  • 分享至 

  • xImage
  •  

前言

接下來這一篇將會介紹兩種作業系統(Window、Mac)的安裝模式,但是後面的文章介紹與操作就會主要以 Mac 為主,基本上只有安裝的時候會稍微有一點不一樣而已,其餘後面的文章就沒有什麼太大差異。

起手式

首先在安裝 Hexo 之前我們必須先準備所謂的開發環境,前一篇文章中有介紹到 Hexo 是基於 Node.js 製作,因此 Node.js 就必須要安裝,此外這邊也會建議要安裝 Git,因為 Git 的安裝與否將會影響到後面的操作。

基本上你進入到 Node.js 與 Git 官方網站時,就會自己顯示相關作業系統的安裝,在這邊 Git 安裝方式就不額外介紹你可以稍微將 「Git 安裝」這個關鍵字拿去餵狗(Google),因此這邊就只會介紹 Node.js 安裝

https://ithelp.ithome.com.tw/upload/images/20200916/20119486pvKZPu0bWh.png

https://ithelp.ithome.com.tw/upload/images/20200916/20119486qcA2joGpFK.png

而這邊說明一下 「LTS」與 「Current」 的意思

  • LTS
    • 中文是長期支援版 (Long-term support),簡單來講就是當前且較穩定的版本。
  • Current
    • 中文是當前版,簡單來講就是目前最新的版本。

通常來講我們在實際開發專案是會建議使用 LTS 版本即可,除非你有什麼特別想嘗試的新功能才會去安裝 Current。

那我們該選擇哪一個 Node.js 版本呢?通常來講是選擇 LTS,如果真的不清楚的話,本篇我們將會使用 Hexo 4,那在前一篇文章有提到官方所提供的 Hexo 4 在各 Node.js 版本的表現速度

https://ithelp.ithome.com.tw/upload/images/20200916/20119486qt8m7Mg5H9.png

因此剛好現在 LTS 是 12 所以就可以直接挑選 LTS 安裝即可。

假使你電腦中有相當多 Node.js 版本可能會切換來切換去,那麼就會建議你可以參考以下文章的解決方式,我本身也是使用 nvm 來切換版本,所以也推薦給你

Mac 安裝 Hexo

接下來讓我們打開終端機,你可以搜尋 「Terminal.app」 或是「終端機」也可以,因為我本身是使用 iTerm,所以就直接用該終端機來展示(只是介面比較漂亮而已)。

準備開始安裝 Hexo 之前會建議你先執行以下指令,確定 Node.js 版本以及 npm 是否已經正確安裝(npm 會隨著 Node.js 安裝時一起安裝)

node -v
npm -v

如果都有跳出版本號,那麼就是成功安裝,舉例來講,我們目前應該顯示的 Node.js 版本應該要是 LTS 版本的 12,那麼 Node.js 理應出現的版本會是 v12.18.2(npm 版本影響不大,只是要確保有安裝 npm,否則會無法安裝套件)。

https://ithelp.ithome.com.tw/upload/images/20200916/201194860RM2PnP0Lq.png

接下來讓我們在終端機輸入以下指令開始安裝 Hexo

npm install -g hexo-cli

基本上 Mac 在安裝時有可能會遇到一些問題,這一段問題在官方有說明,因此我這邊直接貼上官方說明

您在編譯時可能會碰到問題,請先至 App Store 安裝 Xcode,一旦 Xcode 安裝完成後,開啟它並前往 Preferences -> Download -> Command Line Tools -> Install 安裝命令列工具。

通常如果你有安裝 Git 應該是不太會出現該錯誤訊息。

https://ithelp.ithome.com.tw/upload/images/20200916/20119486dkrOjIJenn.png

接下來讓我們在終端機上輸入以下指令

hexo -v

https://ithelp.ithome.com.tw/upload/images/20200916/20119486bZ6Pn6WSol.png

恭喜你,當你出現上面的圖片的資訊,就代表你已經成功安裝 Hexo。

Windows 安裝 Hexo

而在 Windows 的安裝上其實並沒有太大的差異,在這邊終端機我會使用「PowerShell」作為示範,當然你可能會問我為什麼我的 PowerShell 比較漂亮,那是因為我使用的是「Windows Terminal」,你可以透過 Microsoft Store 安裝,若你對於美化有興趣的話,你也可以參考我這一篇文章「Window PowerShell美化(Windows Terminal)

回歸正題,當你開啟 Windows Terminal 之後,會建議你一樣先養成習慣確認一下自己目前電腦的 Node 版本以及是否安裝 npm

node -v
npm -v

https://ithelp.ithome.com.tw/upload/images/20200916/20119486ukmbl7dk9J.png

接下來與前面 Mac 相同輸入以下指令安裝 Hexo

npm install -g hexo-cli

https://ithelp.ithome.com.tw/upload/images/20200916/20119486yecYTrlMBg.png

安裝完畢之後一樣可以透過以下指令確認是否已經安裝成功

hexo -v

https://ithelp.ithome.com.tw/upload/images/20200916/20119486JHvO0m8okF.png

當你看到上圖相關資訊之後,就代表你成功安裝囉。

那麼今天鐵人賽就先到這邊結束,也恭喜你完成 Hexo 安裝,我們下一篇見囉 :D


上一篇
(2) 試著學 Hexo - 什麼是 Hexo
下一篇
(4) 試著學 Hexo - 認識 Hexo 目錄結構
系列文
試著學 Hexo33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
jordan_tseng
iT邦新手 5 級 ‧ 2020-09-24 15:02:02

Ray,想問我已安xcode,然後雖然在設定中沒有download這個選項,但是好像已經有安裝 Command Line Tools,但是輸入npm install -g hexo-cli一直是error -13。

看更多先前的回應...收起先前的回應...
Ray iT邦研究生 4 級 ‧ 2020-09-24 20:41:46 檢舉

這邊會需要您多提供一些錯誤訊息內容以及環境等,因為在環境安裝上遇到的狀況通常會滿多的,但是這邊會建議您確定一下是否有安裝 Node.js 等等哩~

有的,我node 版本是12.18.4, npm 6.14.6。
錯誤圖片放在底下連結,感謝:)
https://drive.google.com/file/d/1-5bKV8BPs4zbUvVdUg3wj44jCUQHC_FC/view?usp=sharing

Ray iT邦研究生 4 級 ‧ 2020-09-25 10:49:21 檢舉

這個是權限的問題,幫我在指令前面打 sudo npm install -g hexo-cli 試試看哩

喔喔~感謝。我本來打sudo,結果忘記,打錯打在npm後面。
/images/emoticon/emoticon02.gif

Ray iT邦研究生 4 級 ‧ 2020-09-26 13:41:28 檢舉

解決就好哩~

0
hyoeun86015
iT邦新手 4 級 ‧ 2021-12-07 21:13:38

你好,不好意思,我沒有用過 PowerShell ,不太懂怎麼操作,請問出現下圖的訊息是我哪裡做錯了嗎?

https://ithelp.ithome.com.tw/upload/images/20211207/20142820X5SnhwPuT8.png

Ray iT邦研究生 4 級 ‧ 2021-12-08 16:06:25 檢舉

這個問題問得很好哦

這個狀況主要是出在你的環境變數跑掉,你可以參考我這一篇解決唷~

無法辨識 'XXX' 詞彙是否為 Cmdlet、函數、指令檔或可執行程式的名稱

你好~ 試了文章解說的方法也爬了其他的Hexo主題安裝解說文章,我發現出錯的最大問題點就是我只裝了nvm,根本沒裝好其他軟體 XD

裝好需要的 Node.js 和 Git 之後按照文章試了指令卻還是不斷出錯,我有可能是我裝軟體的檔案夾有點混亂,所以我全部砍掉,先裝 Node.js 和 Git 之後再安裝 nvm ,輸入指令就成功了!

不過最後我又卡在最後一個安裝 hexo 的指令,出現的訊息是下圖這樣
https://ithelp.ithome.com.tw/upload/images/20211208/20142820D1fB3ZjMCg.jpg

確認我操作 Powershell 軟體是沒問題的,我自己google了關鍵字找到這篇也是您的部落格文章已經自行解決問題~
/images/emoticon/emoticon41.gif

Ray iT邦研究生 4 級 ‧ 2021-12-08 23:22:57 檢舉

很高興你自行解決哩~ :D

1
Winnie
iT邦新手 5 級 ‧ 2022-09-16 17:01:23

Ray好!第一次使用PowerShell還不太熟悉,依照文章中步驟安裝,但出現以下錯誤訊息,想詢問應如何做修正呢?謝謝/images/emoticon/emoticon41.gif
https://ithelp.ithome.com.tw/upload/images/20220916/20151944wZXYDdSTh7.png

Ray iT邦研究生 4 級 ‧ 2022-09-16 18:25:26 檢舉

你可以參考我先前寫的這一篇哩~

https://israynotarray.com/other/20200510/1067127387/

我要留言

立即登入留言